<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>首页 - 女性生理期记录小程序</title>
  <!-- 引入Wot Design Uni样式 -->
  <link rel="stylesheet" href="https://unpkg.com/wot-design-uni/components/dist/wot-design.css">
  <style>
    :root {
      --primary-color: #FF69B4;
      --primary-light: #FFB6C1;
      --background-light: #FFF0F5;
      --white: #FFFFFF;
    }
    
    body {
      margin: 0;
      padding: 0;
      font-family: 'PingFang SC', 'Microsoft YaHei', sans-serif;
      background-color: var(--background-light);
      color: #333;
    }
    
    .container {
      padding: 20px 16px;
      max-width: 375px;
      margin: 0 auto;
    }
    
    .header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .header-title {
      font-size: 24px;
      font-weight: bold;
      color: var(--primary-color);
    }
    
    .calendar-container {
      background-color: var(--white);
      border-radius: 12px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
      padding: 16px;
      margin-bottom: 20px;
    }
    
    .calendar-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;
    }
    
    .calendar-title {
      font-size: 18px;
      font-weight: bold;
      color: var(--primary-color);
    }
    
    .calendar-nav {
      display: flex;
      gap: 16px;
    }
    
    .calendar-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      gap: 8px;
    }
    
    .weekday {
      text-align: center;
      font-size: 12px;
      color: #666;
      padding: 8px 0;
    }
    
    .day {
      position: relative;
      width: 40px;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      border-radius: 50%;
      font-size: 14px;
      cursor: pointer;
      margin: 0 auto;
    }
    
    .day-number {
      z-index: 2;
    }
    
    .day.today {
      font-weight: bold;
      border: 2px solid var(--primary-color);
    }
    
    .day.period {
      background-color: var(--primary-light);
      color: white;
    }
    
    .day.period::after {
      content: "💧";
      position: absolute;
      font-size: 12px;
      bottom: 0;
      right: 0;
    }
    
    .day.predicted-period {
      background-color: var(--background-light);
      border: 2px dashed var(--primary-light);
    }
    
    .day.intimate {
      position: relative;
    }
    
    .day.intimate::after {
      content: "❤️";
      position: absolute;
      font-size: 12px;
      top: 0;
      right: 0;
    }
    
    .quick-actions {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      margin-bottom: 20px;
      position: sticky;
      bottom: 20px;
      z-index: 10;
    }
    
    .action-button {
      flex: 1;
      background-color: var(--primary-color);
      color: white;
      border: none;
      border-radius: 24px;
      padding: 12px 16px;
      font-size: 14px;
      font-weight: bold;
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 4px 8px rgba(255, 105, 180, 0.3);
    }
    
    .action-button.secondary {
      background-color: white;
      color: var(--primary-color);
      border: 1px solid var(--primary-color);
    }
    
    .stats-container {
      background-color: white;
      border-radius: 12px;
      padding: 16px;
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    }
    
    .stats-title {
      font-size: 16px;
      font-weight: bold;
      color: var(--primary-color);
      margin-bottom: 16px;
    }
    
    .progress-container {
      position: relative;
      width: 100px;
      height: 100px;
      margin: 0 auto 16px;
    }
    
    .progress-info {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      text-align: center;
    }
    
    .progress-day {
      font-size: 24px;
      font-weight: bold;
      color: var(--primary-color);
    }
    
    .progress-label {
      font-size: 12px;
      color: #666;
    }
    
    .stats-grid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 16px;
    }
    
    .stat-item {
      text-align: center;
    }
    
    .stat-value {
      font-size: 18px;
      font-weight: bold;
      color: var(--primary-color);
    }
    
    .stat-label {
      font-size: 12px;
      color: #666;
    }
    
    .next-period {
      background-color: var(--primary-light);
      color: white;
      border-radius: 8px;
      padding: 12px;
      text-align: center;
      margin-top: 16px;
    }
    
    .next-period-date {
      font-size: 18px;
      font-weight: bold;
    }
    
    .next-period-days {
      font-size: 14px;
    }
    
    .tab-bar {
      position: fixed;
      bottom: 0;
      left: 0;
      right: 0;
      display: flex;
      background-color: white;
      border-top: 1px solid #eee;
      height: 60px;
    }
    
    .tab-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      color: #666;
    }
    
    .tab-item.active {
      color: var(--primary-color);
    }
    
    .tab-icon {
      font-size: 24px;
      margin-bottom: 4px;
    }
    
    .wd-progress {
      width: 100px;
      height: 100px;
    }
    
    /* 水波纹动画 */
    @keyframes ripple {
      0% {
        transform: scale(0.8);
        opacity: 1;
      }
      100% {
        transform: scale(1.2);
        opacity: 0;
      }
    }
    
    .ripple {
      position: absolute;
      width: 100%;
      height: 100%;
      border-radius: 50%;
      background-color: var(--primary-light);
      opacity: 0.6;
      animation: ripple 1.5s infinite ease-out;
    }
  </style>
</head>
<body>
  <div class="container">
    <div class="header">
      <div class="header-title">粉红日记</div>
      <div class="header-icon">📅</div>
    </div>
    
    <div class="calendar-container">
      <div class="calendar-header">
        <div class="calendar-title">2023年11月</div>
        <div class="calendar-nav">
          <span>◀️</span>
          <span>▶️</span>
        </div>
      </div>
      
      <div class="calendar-grid">
        <!-- 星期头部 -->
        <div class="weekday">日</div>
        <div class="weekday">一</div>
        <div class="weekday">二</div>
        <div class="weekday">三</div>
        <div class="weekday">四</div>
        <div class="weekday">五</div>
        <div class="weekday">六</div>
        
        <!-- 日期格子 -->
        <!-- 上月部分 -->
        <div class="day"><span class="day-number">29</span></div>
        <div class="day"><span class="day-number">30</span></div>
        <div class="day"><span class="day-number">31</span></div>
        <!-- 本月部分 -->
        <div class="day"><span class="day-number">1</span></div>
        <div class="day"><span class="day-number">2</span></div>
        <div class="day"><span class="day-number">3</span></div>
        <div class="day"><span class="day-number">4</span></div>
        
        <div class="day"><span class="day-number">5</span></div>
        <div class="day"><span class="day-number">6</span></div>
        <div class="day"><span class="day-number">7</span></div>
        <div class="day"><span class="day-number">8</span></div>
        <div class="day"><span class="day-number">9</span></div>
        <div class="day period"><span class="day-number">10</span></div>
        <div class="day period"><span class="day-number">11</span></div>
        
        <div class="day period"><span class="day-number">12</span></div>
        <div class="day period"><span class="day-number">13</span></div>
        <div class="day period"><span class="day-number">14</span></div>
        <div class="day"><span class="day-number">15</span></div>
        <div class="day"><span class="day-number">16</span></div>
        <div class="day intimate"><span class="day-number">17</span></div>
        <div class="day"><span class="day-number">18</span></div>
        
        <div class="day"><span class="day-number">19</span></div>
        <div class="day today"><span class="day-number">20</span></div>
        <div class="day"><span class="day-number">21</span></div>
        <div class="day"><span class="day-number">22</span></div>
        <div class="day"><span class="day-number">23</span></div>
        <div class="day"><span class="day-number">24</span></div>
        <div class="day"><span class="day-number">25</span></div>
        
        <div class="day"><span class="day-number">26</span></div>
        <div class="day"><span class="day-number">27</span></div>
        <div class="day"><span class="day-number">28</span></div>
        <div class="day"><span class="day-number">29</span></div>
        <div class="day"><span class="day-number">30</span></div>
        <div class="day predicted-period"><span class="day-number">1</span></div>
        <div class="day predicted-period"><span class="day-number">2</span></div>
      </div>
    </div>
    
    <div class="quick-actions">
      <button class="action-button">月经来了</button>
      <button class="action-button secondary">做爱爱了</button>
    </div>
    
    <div class="stats-container">
      <div class="stats-title">周期数据</div>
      
      <div class="progress-container">
        <div class="ripple"></div>
        <svg class="wd-progress" viewBox="0 0 100 100">
          <circle cx="50" cy="50" r="40" stroke="#f0f0f0" stroke-width="10" fill="none"/>
          <circle cx="50" cy="50" r="40" stroke="#FF69B4" stroke-width="10" fill="none" stroke-dasharray="251.2" stroke-dashoffset="188.4" transform="rotate(-90 50 50)"/>
        </svg>
        <div class="progress-info">
          <div class="progress-day">11</div>
          <div class="progress-label">天</div>
        </div>
      </div>
      
      <div class="stats-grid">
        <div class="stat-item">
          <div class="stat-value">28</div>
          <div class="stat-label">平均周期天数</div>
        </div>
        <div class="stat-item">
          <div class="stat-value">5</div>
          <div class="stat-label">平均经期天数</div>
        </div>
      </div>
      
      <div class="next-period">
        <div class="next-period-date">下次预计11月30日</div>
        <div class="next-period-days">还有 10 天</div>
      </div>
    </div>
  </div>
  
  <div class="tab-bar">
    <div class="tab-item active">
      <div class="tab-icon">📅</div>
      <div>首页</div>
    </div>
    <div class="tab-item">
      <div class="tab-icon">📊</div>
      <div>统计</div>
    </div>
    <div class="tab-item">
      <div class="tab-icon">👤</div>
      <div>我的</div>
    </div>
  </div>
</body>
</html> 